<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inventory Management System - Notifications</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <style>

        .layui-table thead th {
            background-color: #f2f2f2;
        }
        .layui-table tbody tr:hover {
            background-color: #f9f9f9;
        }
        .layui-btn-xs {
            margin-top: 2px;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">
                <i class="layui-icon layui-icon-cart"></i>Inventory Management</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item">
                    <a href="/index/"><i class="layui-icon layui-icon-table"></i>Goods Management</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/count/"><i class="layui-icon layui-icon-rmb"></i>Budget Statistics</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/other/"><i class="layui-icon layui-icon-time"></i>Stock Records</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/notifications/"><i class="layui-icon layui-icon-notice"></i>Notifications</a>
                </li>
                {% if session.get('role') == 'super_admin' %}
                <li class="layui-nav-item">
                    <a href="/admin/manage_users"><i class="layui-icon layui-icon-set"></i>User Management</a>
                </li>
                {% endif %}
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="/logout" class="layui-btn layui-btn-danger">Logout</a>
                </li>
            </ul>
        </div>

        <div style="padding: 5%;">
            <div class="layui-container">
                <h2 style="margin-bottom: 20px;">Notification Bar</h2>
                <table class="layui-hide" id="notifications" lay-filter="notifications"></table>
            </div>
        </div>
    </div>

   <script>
        layui.use(['table', 'util', 'layer', 'jquery'], function() {
            var table = layui.table;
            var util = layui.util;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 通知栏表格
            table.render({
                elem: '#notifications',
                url: '/data/notifications/',
                page: {
                        layout: ['count', 'prev', 'page', 'next', 'limit'],
                        limits: [10, 20, 30, 50],
                        limit: 10,
                        text: {
                                count: 'Total {count} items',
                                limit: 'Items per page',
                                page: 'Page',
                                prev: 'Previous',
                                next: 'Next',
                                first: 'First',
                                last: 'Last',
                                loading: 'Loading...',

                            }},

                limit: 10, // 每页显示 10 条记录
                cols: [[
                    { field: 'id', title: 'ID', width: 80 },
                    {
                        field: 'message',
                        title: 'Notice Content',
                        width: 600,
                        templet: function(d) {
                            var className = d.is_read ? 'read-notification' : '';
                            return '<a href="javascript:;" class="layui-table-link ' + className + '" onclick="showNotificationDetail(\'' + d.message + '\')">' + d.message + '</a>';
                        }
                    },
                    {
                        field: 'created_at',
                        title: 'creation time',
                        width: 200,
                        templet: function(d) {
                            return util.toDateString(d.created_at);
                        }
                    },
                    {
                        title: '',
                        width: 100,
                        templet: function(d) {
                            var buttonText = d.is_read ? 'Read' : 'Mark as Read';
                            return '<a class="layui-btn layui-btn-xs mark-read-btn" data-id="' + d.id + '">' + buttonText + '</a>';
                        }
                    }
                ]]
            });

            // 显示通知详情的函数
            window.showNotificationDetail = function(message) {
                layer.open({
                    type: 1,
                    title: 'Notice Details',
                    area: ['600px', '400px'],
                    content: '<div style="padding: 20px;">' + message + '</div>'
                });
            }

            // 点击标记为已读按钮的事件处理
            $(document).on('click', '.mark-read-btn', function() {
                var notificationId = $(this).data('id');
                $.ajax({
                    url: '/mark_notification_as_read/' + notificationId,
                    type: 'GET',
                    success: function(response) {
                        if (response.code === 0) {
                            layer.msg('The notice has been marked as read', {icon: 1, time: 2000});
                            // 刷新表格
                            table.reload('notifications');
                        } else {
                            layer.msg('The marking failed. Please try again later', {icon: 2, time: 2000});
                        }
                    },
                    error: function() {
                        layer.msg('Network error. Please try again later', {icon: 2, time: 2000});
                    }
                });
            });
        });
    </script>
</body>
</html>